import { useState } from "react";
import { Todo } from ".";
import Modal from "@/components/Modal";
import TInput from "@/components/Input/index";
import TButton from "@/components/Botton";
import TCompact from "@/components/Space/Compact";

interface TodoHeaderProps {
  addHandler: (todo: Todo) => void;
}

interface ModalProps {
  open: boolean;
  modalContent: string;
}

function TodoHeader(props: TodoHeaderProps) {
  const { addHandler } = props;
  const [name, setName] = useState("");

  const [modalOption, setModalModalOption] = useState<ModalProps>({
    open: false,
    modalContent: "是否确认录入待办事项？",
  });
  function handleConfirm() {
    if (name) {
      const todo: Todo = {
        id: Date.now() + "",
        name,
        checked: false,
        done: false,
      };
      addHandler(todo);
      setName("");
    }
    setModalModalOption({ ...modalOption, open: false });
  }
  function handleCancel() {
    setModalModalOption({ ...modalOption, open: false });
  }

  function onChange(value: string) {
    setName(value);
  }

  function setTodoHandler() {
    if (name) {
      setModalModalOption({
        ...modalOption,
        modalContent: "是否确认录入待办事项？",
      });
    } else {
      setModalModalOption({ ...modalOption, modalContent: "请输入待办事项！" });
    }
    setModalModalOption({ ...modalOption, open: true });
  }

  function enterHandler() {
    setTodoHandler();
  }

  return (
    <>
      <header>
        <h1>TodoList</h1>
        <div className="input">
          <TCompact>
            <TInput
              onChange={onChange}
              onEnter={enterHandler}
              placeholder="今天要做什么？"
            ></TInput>
            <TButton onClick={setTodoHandler}>添加</TButton>
          </TCompact>
        </div>
      </header>

      <Modal
        // open={open}
        // title="弹框提示"
        {...modalOption}
        onOk={handleConfirm}
        onCancel={handleCancel}
      >
        {modalOption.modalContent}
      </Modal>
    </>
  );
}

export default TodoHeader;
